<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
  <HelloWorld  />
  <div class="container">
    <lifeCycle />
  </div>
  <div  class="container">
    <reacTive />
  </div>
  <div  class="container">
    <ApiToref />
  </div>
  <div  class="container">
    <ApiTorefs />
  </div>
   <div  class="container">
    <ApiRef />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import lifeCycle from './components/lifeCycle.vue';
import reacTive from './components/reactive.vue';
import ApiToref from './components/apiToRef.vue';
import ApiTorefs from './components/apiToRefs.vue';
import ApiRef from './components/apiRef.vue';


export default {
  name: 'App',
  components: {
    HelloWorld,
    lifeCycle,
    reacTive,
    ApiToref,
    ApiTorefs,
    ApiRef
  }
}
</script>
<style>
.container{
  width: 100px;
  height: 100px;
  background-color:pink;
  margin: 5px auto;
}
</style>
